<template>
    <div class="home">
        <HomeSynopsis ref="synopsis"></HomeSynopsis>
        <HomeGarments ref="garments" :scroll="scroll" :screenHeight="screenHeight"></HomeGarments>
        <HomeClothingStyle :scroll="scroll" :screenHeight="screenHeight"></HomeClothingStyle>
        <HomeClothingVision ref="clothing-vision" :scroll="scroll" :screenHeight="screenHeight"></HomeClothingVision>
        <HomeSummarize ref="summarize" :scroll="scroll" :screenHeight="screenHeight"></HomeSummarize>
    </div>
</template>
<script>
import { HOME } from "@/utils/SeoConfig";
export default {
    name: "Home",
    head () {
        return {
            title: HOME.title,
            meta: [
                { name: "keywords", content: HOME.keywords },
                { name: "description", content: HOME.description },
            ],
        };
    },
    data () {
        return {
            un_animation: false,
            screenHeight: 0,
            screenOldHeight: 0,
            screenWidth: 0,
            pageScale: 1,
            scaleDoms: {},
            debounceTimer: null,
            scroll: 0
        };
    },
    methods: {
        clamp (min, num, max) {
            return Math.min(Math.max(num, min), max);
        },
        debounce (fn, delay = 1000) {
            // 定时器
            if (this.debounceTimer) {
                clearTimeout(this.debounceTimer);
            }
            // 设立新定时器

            this.debounceTimer = setTimeout(() => {
                fn()
            }, delay);
        },
        onScroll (init) {
            if (this.screenWidth <= 943);
            if (init) this.scroll = 0;
            this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
        },
        changeScreenSize () {
            let { clientHeight, offsetWidth } = document.documentElement
            this.screenOldHeight = this.screenHeight;
            this.screenHeight = clientHeight;
            this.screenWidth = offsetWidth;
            this.debounce(this.calculateZoom, 500);
        },
        calculateZoom () {
            if (this.screenOldHeight && this.screenOldHeight != this.screenHeight || this.mobileType) {
                this.getScaleDom()
                this.$emit('global:homeResize')
            }
            let width = this.screenWidth || 0;
            let height = this.screenHeight || 0;
            let limitWidths = {
                synopsis: 1264,
                garments: 1344,
                clothingVision: 1200,
                summarize: 1200,
            };
            let limitHeight = {
                clothingVision: 898
            }
            if (width < 943) {
                if (!this.mobileType) {
                    this.mobileType = true;
                    Object.keys(this.scaleDoms).forEach(key => {
                        this.scaleDoms[key](1)
                    })
                }
                return
            }
            this.mobileType = false;
            Object.keys(this.scaleDoms).forEach(key => {
                let limit_width = limitWidths[key];
                let limit_height = limitHeight[key] || 1;
                let width_scale = this.clamp(0, width / limit_width, 1)
                let height_scale = this.clamp(0, height / limit_height, 1)
                let scale = Math.min(width_scale, height_scale)
                this.scaleDoms[key](scale)
            })
            this.$nextTick((e) => {
                setTimeout(() => this.onScroll(true), 10);
            });
        },
        getScaleDom () {
            this.scaleDoms.synopsis = (scale) => { this.$refs.synopsis.$el.style.transform = `scale(${scale})` };
            this.scaleDoms.garments = (scale) => { this.$refs.garments.$el.style.transform = `scale(${scale})` };
            this.scaleDoms.clothingVision = (scale) => { this.$refs['clothing-vision'].$el.style.setProperty('--scale', this.formatScale(scale)) }
            this.scaleDoms.summarize = (scale) => { this.$refs.summarize.$el.style.setProperty('--scale', scale) }
        },
        formatScale (scale) {
            let scalePercentage = Math.floor(scale * 100);
            scalePercentage = Math.floor(scalePercentage / 10) * 10 + (scalePercentage % 10 >= 5 ? 5 : 0);
            return scalePercentage / 100;
        }
    },
    created () {
        if (process.client) {
            window.addEventListener("scroll", this.onScroll);
            window.addEventListener("resize", this.changeScreenSize);
        }
    },
    mounted () {
        this.changeScreenSize();
        this.onScroll(true);
        this.getScaleDom()
    },
    beforeDestroy () {
        window.removeEventListener("scroll", this.onScroll);
        window.removeEventListener("resize", this.changeScreenSize);
    },
};
</script>
<style lang="scss" scoped>
.home::v-deep {
    --home-screen-height: calc(100vh - 78px);
    width: 100vw;
    min-height: var(--home-screen-height);
    * {
        box-sizing: border-box;
    }

    .home-btn {
        margin: 0;
        cursor: pointer;
        width: 198px;
        height: 52px;
        border-radius: 26px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 44px;
        font-size: 16px;
        font-weight: 600;
        white-space: nowrap;
        i {
            font-size: 12px;
            margin: 0 0 0 14px;
        }
    }
}
</style>
